<!DOCTYPE html>

<!--
  Ideally, no red bleed should be visible along the outer/inner border edges.
  But our current implementation is not ideal - so we bleed due to clip
  anti-aliasing artifacts.

  Trivial bleed diffs are fine to ignore/rebaseline.  Improvements are welcome.
  Regressions (moar red) are not.
-->
<style>
div {
  display: inline-block;
  border: 4px solid green;
  overflow: hidden;
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 20px;
}

.rounded {
  border-radius: 10px;
}

.rotated {
  transform: rotate(4deg);
}
</style>

<table>
<tr>
<td><div>
  <img src="">
</div></td>

<td><div>
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect width='100%' height='100%' fill='green'/></svg>">
</div></td>

<td><div class="rounded">
  <img src="">
</div></td>

<td><div class="rounded">
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect width='100%' height='100%' fill='green'/></svg>">
</div></td>
</tr>

<tr class="rotated">
<td><div>
  <img src="">
</div></td>

<td><div>
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect width='100%' height='100%' fill='green'/></svg>">
</div></td>

<td><div class="rounded">
  <img src="">
</div></td>

<td><div class="rounded">
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect width='100%' height='100%' fill='green'/></svg>">
</div></td>
</tr>

<tr align="center">
<td>PNG</td><td>SVG</td><td>PNG</td><td>SVG</td>
</tr>
